<template>
	<view class="user-page">
		<view class="user-img">
			<image style="width: 50px; height: 50px;" :src="currentStudent.imageUrl" round fit="cover" />
		</view>
		<view class="user-name-perm">
			<view class="name">{{currentStudent.name}}</view>
			<view class="permicon-time">
				<van-icon name="/static/icon/my-vip.png" size="16"  v-if="currentStudent?.id"/>
				<view class="time" v-if="currentStudent?.id">{{ currentStudent.expireDate}}到期</view>
			</view>
		</view>
		<view class="switch-child">
			<!-- <view class="label">切换小孩</view>
			<van-icon name="arrow" size="16" color="#ffffff" /> -->
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed, onMounted, ref } from 'vue'
	import { useStudentListStore } from "@/stores/useStudentList.js"
	import {onShow} from "@dcloudio/uni-app"
	import { homeServer } from "@/common/index";
	import { urlHelp } from "@/utils/index"
	const studentStore = useStudentListStore();
	// const currentStudent = computed(() => studentStore.currentStudent)
	const currentStudent = ref({})
	// 获取学生信息
	const studentList = async () => {
		try{
			const {data, status} = await homeServer.studentList()
			if(status === "200"){
				if(data?.length === 0 || !Array.isArray(data)){
					studentStore.setStudents([]);
					currentStudent.value = {}
				} else {
					const sts = data?.map(item => urlHelp.imgAddPrefix(item, 'imageUrl')) || [];
					console.log('sts 学生信息', sts)
					studentStore.setStudents(sts || []);
					const curStd = sts.find(s => s.id === studentStore.currentStudent?.id);
					studentStore.onselectStudent(curStd);
					currentStudent.value = curStd;
				}
			}
		}catch(e){
			console.log(e)
			//TODO handle the exception
		}
	}
	
	onShow(() => {
		studentList()
	})
	
	
</script>

<style lang="scss" scoped>
	.user-page{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.user-img{
			display: flex;
			justify-content: center;
			width: 140upx;
			.van-image{
				border:5upx solid #FFFFFF
			}
			// height: 80upx;
		}
		.user-name-perm{
			width: calc(100% - 140upx - 160upx);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			.name{
				margin-bottom: 10upx;
				font-weight: 800;
				font-size: 34upx;
				color: #040B1B;
			}
			.permicon-time{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 10upx;
				.time{
					margin-left: 15upx;
					font-weight: 800;
					font-size: 26upx;
					color: #040B1B;
				}
			}
		}
		.switch-child{
			width: 160upx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.label{
				margin-right: 10upx;
				font-weight: 800;
				color: #FFFFFF;
				font-size: 28upx;
			}
		}
		
	}
</style>